<template>
  <div class="admin-home-container">
    <el-card class="page-header-card">
      <div class="page-header">
        <div class="page-title">
          <h2>管理首页</h2>
          <p>欢迎回来，管理员。以下是系统概况和实时数据。</p>
        </div>
      </div>
    </el-card>
    
    <!-- 数据概览 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="(card, index) in dataCards" :key="index">
        <el-card class="data-card" :class="card.type">
          <div class="card-icon">
            <el-icon>
              <component :is="card.icon"></component>
            </el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
            <div class="card-trend" v-if="card.trend">
              <span :class="card.trend > 0 ? 'up' : 'down'">
                <el-icon v-if="card.trend > 0"><ArrowUp /></el-icon>
                <el-icon v-else><ArrowDown /></el-icon>
                {{ Math.abs(card.trend) }}%
              </span>
              <span class="trend-text">较昨日</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 实时数据和图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>停车场使用情况</span>
              <div class="header-actions">
                <el-radio-group v-model="chartTimeRange" size="small">
                  <el-radio-button label="day">今日</el-radio-button>
                  <el-radio-button label="week">本周</el-radio-button>
                  <el-radio-button label="month">本月</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container" ref="occupancyChartRef"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="real-time-card">
          <template #header>
            <div class="card-header">
              <span>实时监控</span>
              <el-button type="primary" :icon="Refresh" circle size="small" @click="refreshRealTimeData"></el-button>
            </div>
          </template>
          <div class="real-time-info">
            <div class="real-time-item">
              <div class="item-label">当前在场车辆</div>
              <div class="item-value">{{ realTimeData.currentVehicles }} 辆</div>
            </div>
            <div class="real-time-item">
              <div class="item-label">今日进场</div>
              <div class="item-value">{{ realTimeData.todayEntry }} 辆</div>
            </div>
            <div class="real-time-item">
              <div class="item-label">今日出场</div>
              <div class="item-value">{{ realTimeData.todayExit }} 辆</div>
            </div>
            <div class="real-time-item">
              <div class="item-label">剩余车位</div>
              <div class="item-value available">{{ realTimeData.availableSpaces }} 个</div>
            </div>
            <div class="real-time-item">
              <div class="item-label">今日收入</div>
              <div class="item-value income">¥{{ realTimeData.todayIncome.toFixed(2) }}</div>
            </div>
            <div class="last-update">
              最后更新: {{ formatTime(realTimeData.lastUpdate) }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 车位分布和收入分析 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>车位分布情况</span>
            </div>
          </template>
          <div class="chart-container" ref="spaceDistributionChartRef"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>收入分析</span>
              <div class="header-actions">
                <el-radio-group v-model="incomeChartType" size="small">
                  <el-radio-button label="daily">日收入</el-radio-button>
                  <el-radio-button label="monthly">月收入</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container" ref="incomeChartRef"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 快捷功能入口 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="shortcut-card">
          <template #header>
            <div class="card-header">
              <span>快捷功能</span>
            </div>
          </template>
          <div class="shortcut-grid">
            <div 
              v-for="(shortcut, index) in shortcuts" 
              :key="index" 
              class="shortcut-item"
              @click="goToModule(shortcut.path)"
            >
              <div class="shortcut-icon">
                <el-icon>
                  <component :is="shortcut.icon"></component>
                </el-icon>
              </div>
              <div class="shortcut-text">{{ shortcut.name }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最新活动 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最新预约</span>
              <el-button type="text" @click="goToModule('/admin/reservation')">查看全部</el-button>
            </div>
          </template>
          <div class="activity-list">
            <div v-for="(item, index) in latestReservations" :key="index" class="activity-item">
              <div class="activity-time">{{ formatDateTime(item.created_at) }}</div>
              <div class="activity-content">
                <div class="activity-title">
                  <span class="plate-number">{{ item.plate_number }}</span>
                  <el-tag size="small" :type="getReservationStatusType(item.status)">
                    {{ getReservationStatusText(item.status) }}
                  </el-tag>
                </div>
                <div class="activity-desc">
                  预约时间: {{ formatDateTime(item.start_time) }} - {{ formatTime(item.end_time) }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近支付</span>
              <el-button type="text" @click="goToModule('/admin/record')">查看全部</el-button>
            </div>
          </template>
          <div class="activity-list">
            <div v-for="(item, index) in latestPayments" :key="index" class="activity-item">
              <div class="activity-time">{{ formatDateTime(item.pay_time) }}</div>
              <div class="activity-content">
                <div class="activity-title">
                  <span class="order-number">{{ item.order_number }}</span>
                  <el-tag size="small" type="success">已支付</el-tag>
                </div>
                <div class="activity-desc">
                  <span class="payment-amount">¥{{ item.amount.toFixed(2) }}</span>
                  <span class="payment-type">{{ item.payment_type_text }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Refresh, Van, Money, Wallet, User, CreditCard, Collection, 
  Place, SetUp, Calendar, List, Position, Tickets, ArrowUp, ArrowDown
} from '@element-plus/icons-vue'
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册 ECharts 组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer
])

const router = useRouter()

// 数据卡片
const dataCards = ref([
  {
    title: '总车位数',
    value: '180',
    icon: 'Van',
    type: 'primary',
    trend: 0
  },
  {
    title: '用户数量',
    value: '246',
    icon: 'User',
    type: 'info',
    trend: 3.2
  },
  {
    title: '今日收入',
    value: '¥1,285.00',
    icon: 'Money',
    type: 'success',
    trend: 5.7
  },
  {
    title: '本月收入',
    value: '¥21,654.00',
    icon: 'Wallet',
    type: 'warning',
    trend: -2.3
  }
])

// 实时数据
const realTimeData = reactive({
  currentVehicles: 35,
  todayEntry: 87,
  todayExit: 52,
  availableSpaces: 145,
  todayIncome: 1285.00,
  lastUpdate: new Date('2025-03-08 13:45:00')
})

// 图表相关
const occupancyChartRef = ref(null)
const spaceDistributionChartRef = ref(null)
const incomeChartRef = ref(null)
let occupancyChart = null
let spaceDistributionChart = null
let incomeChart = null

// 图表时间范围和类型
const chartTimeRange = ref('day')
const incomeChartType = ref('daily')

// 最新预约和支付数据
const latestReservations = ref([
  {
    id: 1,
    plate_number: '粤B12345',
    start_time: '2025-03-08 09:00:00',
    end_time: '2025-03-08 18:00:00',
    status: 0, // 待审核
    created_at: '2025-03-08 08:45:00'
  },
  {
    id: 2,
    plate_number: '粤B67890',
    start_time: '2025-03-09 08:00:00',
    end_time: '2025-03-09 17:00:00',
    status: 1, // 已确认
    created_at: '2025-03-08 07:30:00'
  },
  {
    id: 3,
    plate_number: '粤A98765',
    start_time: '2025-03-08 14:00:00',
    end_time: '2025-03-08 16:00:00',
    status: 4, // 已拒绝
    created_at: '2025-03-08 10:15:00'
  },
  {
    id: 4,
    plate_number: '粤C54321',
    start_time: '2025-03-10 09:00:00',
    end_time: '2025-03-10 18:00:00',
    status: 0, // 待审核
    created_at: '2025-03-08 09:20:00'
  },
  {
    id: 5,
    plate_number: '粤B24680',
    start_time: '2025-03-08 13:00:00',
    end_time: '2025-03-08 18:00:00',
    status: 1, // 已确认
    created_at: '2025-03-08 11:05:00'
  }
])

const latestPayments = ref([
  {
    order_number: 'SP202503080001',
    payment_type: 0, // 0-停车费，1-预约费
    payment_type_text: '停车费',
    amount: 25.00,
    pay_time: '2025-03-08 12:45:00'
  },
  {
    order_number: 'SP202503080002',
    payment_type: 1, // 预约费
    payment_type_text: '预约费',
    amount: 30.00,
    pay_time: '2025-03-08 11:30:00'
  },
  {
    order_number: 'SP202503080003',
    payment_type: 0, // 停车费
    payment_type_text: '停车费',
    amount: 15.50,
    pay_time: '2025-03-08 10:20:00'
  },
  {
    order_number: 'SP202503080004',
    payment_type: 0, // 停车费
    payment_type_text: '停车费',
    amount: 42.00,
    pay_time: '2025-03-08 09:15:00'
  },
  {
    order_number: 'SP202503080005',
    payment_type: 1, // 预约费
    payment_type_text: '预约费',
    amount: 20.00,
    pay_time: '2025-03-08 08:50:00'
  }
])

// 快捷功能
const shortcuts = ref([
  { name: '用户管理', icon: 'User', path: '/admin/user' },
  { name: '车位管理', icon: 'Place', path: '/admin/parking' },
  { name: '预约管理', icon: 'Calendar', path: '/admin/reservation' },
  { name: '出入场信息', icon: 'Position', path: '/admin/record' },
  { name: '公告管理', icon: 'List', path: '/admin/announcement' },
  { name: '系统管理', icon: 'SetUp', path: '/admin/system' }
])

// 刷新实时数据
const refreshRealTimeData = () => {
  // 模拟数据刷新
  realTimeData.currentVehicles = Math.floor(Math.random() * 10) + 30;
  realTimeData.todayEntry = Math.floor(Math.random() * 10) + 85;
  realTimeData.todayExit = Math.floor(Math.random() * 10) + 50;
  realTimeData.availableSpaces = 180 - realTimeData.currentVehicles;
  realTimeData.todayIncome = parseFloat((Math.random() * 200 + 1200).toFixed(2));
  realTimeData.lastUpdate = new Date('2025-03-08 ' + new Date().toTimeString().slice(0, 8));
}

// 初始化停车场使用情况图表
const initOccupancyChart = () => {
  if (occupancyChartRef.value) {
    occupancyChart = echarts.init(occupancyChartRef.value)
    updateOccupancyChart()
  }
}

// 更新停车场使用情况图表
const updateOccupancyChart = () => {
  // 根据不同的时间范围设置数据
  let xAxisData = []
  let entrySeries = []
  let exitSeries = []
  
  if (chartTimeRange.value === 'day') {
    // 按小时统计今日数据
    xAxisData = Array.from({length: 24}, (_, i) => `${i}:00`)
    entrySeries = Array.from({length: 24}, () => Math.floor(Math.random() * 10))
    exitSeries = Array.from({length: 24}, () => Math.floor(Math.random() * 8))
    
    // 确保当前时间之后的数据为0
    const currentHour = new Date().getHours()
    for (let i = currentHour + 1; i < 24; i++) {
      entrySeries[i] = 0
      exitSeries[i] = 0
    }
  } else if (chartTimeRange.value === 'week') {
    // 按日统计本周数据
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    xAxisData = weekdays
    entrySeries = Array.from({length: 7}, () => Math.floor(Math.random() * 50) + 30)
    exitSeries = Array.from({length: 7}, () => Math.floor(Math.random() * 45) + 25)
  } else {
    // 按日统计本月数据
    xAxisData = Array.from({length: 31}, (_, i) => `${i + 1}日`)
    entrySeries = Array.from({length: 31}, () => Math.floor(Math.random() * 50) + 30)
    exitSeries = Array.from({length: 31}, () => Math.floor(Math.random() * 45) + 25)
    
    // 确保当前日期之后的数据为0
    const currentDate = 8 // 当前日期为2025-03-08
    for (let i = currentDate; i < 31; i++) {
      entrySeries[i] = 0
      exitSeries[i] = 0
    }
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['入场', '出场']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '入场',
        type: 'bar',
        stack: 'total',
        data: entrySeries,
        itemStyle: {
          color: '#67C23A'
        }
      },
      {
        name: '出场',
        type: 'bar',
        stack: 'total',
        data: exitSeries,
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  }
  
  occupancyChart.setOption(option)
}

// 初始化车位分布图表
const initSpaceDistributionChart = () => {
  if (spaceDistributionChartRef.value) {
    spaceDistributionChart = echarts.init(spaceDistributionChartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'horizontal',
        bottom: 'bottom',
        data: ['空闲', '占用', '维护', '预留']
      },
      series: [
        {
          name: '车位状态',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 135, name: '空闲', itemStyle: { color: '#67C23A' } },
            { value: 35, name: '占用', itemStyle: { color: '#F56C6C' } },
            { value: 8, name: '维护', itemStyle: { color: '#909399' } },
            { value: 2, name: '预留', itemStyle: { color: '#E6A23C' } }
          ]
        }
      ]
    }
    
    spaceDistributionChart.setOption(option)
  }
}

// 初始化收入图表
const initIncomeChart = () => {
  if (incomeChartRef.value) {
    incomeChart = echarts.init(incomeChartRef.value)
    updateIncomeChart()
  }
}

// 更新收入图表
const updateIncomeChart = () => {
  let xAxisData = []
  let data = []
  
  if (incomeChartType.value === 'daily') {
    // 最近7天收入
    xAxisData = Array.from({length: 7}, (_, i) => {
      const date = new Date('2025-03-08')
      date.setDate(date.getDate() - (6 - i))
      return `${date.getMonth() + 1}/${date.getDate()}`
    })
    
    data = [820, 932, 901, 934, 1290, 1330, 1285]
  } else {
    // 按月份统计收入
    xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    data = [10500, 12500, 21654, 0, 0, 0, 0, 0, 0, 0, 0, 0] // 只有前3个月有数据
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '¥{value}'
      }
    },
    series: [
      {
        name: '收入',
        type: 'line',
        data: data,
        itemStyle: {
          color: '#F56C6C'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(245, 108, 108, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(245, 108, 108, 0.1)'
              }
            ]
          }
        },
        smooth: true
      }
    ]
  }
  
  incomeChart.setOption(option)
}

// 监听图表时间范围变化
watch(chartTimeRange, () => {
  updateOccupancyChart()
})

// 监听收入图表类型变化
watch(incomeChartType, () => {
  updateIncomeChart()
})

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '-'
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

// 格式化时间
const formatTime = (dateTimeStr) => {
  if (!dateTimeStr) return '-'
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取预约状态类型
const getReservationStatusType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'success'
    case 2: return 'primary'
    case 3: return 'danger'
    case 4: return 'warning'
    default: return 'info'
  }
}

// 获取预约状态文本
const getReservationStatusText = (status) => {
  switch (status) {
    case 0: return '待审核'
    case 1: return '已确认'
    case 2: return '已使用'
    case 3: return '已取消'
    case 4: return '已拒绝'
    default: return '未知'
  }
}

// 跳转到指定模块
const goToModule = (path) => {
  router.push(path)
}

// 组件挂载时初始化图表
onMounted(() => {
  initOccupancyChart()
  initSpaceDistributionChart()
  initIncomeChart()
  
  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener('resize', () => {
    occupancyChart?.resize()
    spaceDistributionChart?.resize()
    incomeChart?.resize()
  })
})
</script>

<style scoped>
.admin-home-container {
  min-height: calc(100vh - 180px);
}

.page-header-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1a237e, #283593);
  color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
}

.page-title p {
  margin: 8px 0 0;
  opacity: 0.8;
  font-size: 14px;
}

.date-info {
  font-size: 14px;
  opacity: 0.8;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

/* 数据卡片样式 */
.data-card {
  height: 120px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.data-card.primary {
  background: linear-gradient(135deg, #409EFF, #69b7ff);
  color: white;
}

.data-card.success {
  background: linear-gradient(135deg, #67C23A, #85ce61);
  color: white;
}

.data-card.warning {
  background: linear-gradient(135deg, #E6A23C, #ebb563);
  color: white;
}

.data-card.info {
  background: linear-gradient(135deg, #909399, #a6a9ad);
  color: white;
}

.card-icon {
  font-size: 64px;
  opacity: 0.2;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.card-info {
  padding: 20px;
  z-index: 1;
}

.card-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-trend {
  font-size: 14px;
}

.card-trend .up {
  color: #f0f9eb;
}

.card-trend .down {
  color: #fef0f0;
}

.trend-text {
  margin-left: 5px;
  opacity: 0.8;
}

/* 图表卡片 */
.chart-card, 
.real-time-card, 
.activity-card, 
.shortcut-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.header-actions {
  display: flex;
  align-items: center;
}

/* 实时监控样式 */
.real-time-info {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.real-time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-label {
  font-size: 16px;
  color: #606266;
}

.item-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.item-value.available {
  color: #67C23A;
}

.item-value.income {
  color: #F56C6C;
}

.last-update {
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  color: #909399;
}

/* 快捷功能样式 */
.shortcut-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

.shortcut-item {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.shortcut-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #ecf5ff;
}

.shortcut-icon {
  font-size: 32px;
  margin-bottom: 10px;
  color: #409EFF;
}

.shortcut-text {
  font-size: 16px;
  color: #606266;
}

/* 活动列表样式 */
.activity-list {
  height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-time {
  min-width: 100px;
  color: #909399;
  font-size: 14px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plate-number, .order-number {
  font-weight: bold;
  color: #303133;
}

.activity-desc {
  color: #606266;
  font-size: 14px;
}

.payment-amount {
  font-weight: bold;
  color: #F56C6C;
  margin-right: 10px;
}

.payment-type {
  color: #909399;
}

@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .date-info {
    margin-top: 10px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-actions {
    margin-top: 10px;
  }
  
  .shortcut-grid {
    justify-content: center;
  }
  
  .activity-item {
    flex-direction: column;
  }
  
  .activity-time {
    margin-bottom: 5px;
  }
}
</style> 